<template>
  <div class="carousel">
    <div class="carousel-inner" :style="{ 'transform': `translateX(-${currentIndex * 100}%)` }">
      <div class="carousel-item" v-for="(image, index) in images" :key="index" @click="goToDetailPage(carouselKey)">
        <img :src="image" :alt="`Slide ${index}`">
      </div>
    </div>
    <div class="carousel-navigation">
      <button class="carousel-button" @click="prev">←</button>
      <button class="carousel-button" @click="next">→</button>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      images: {
        type: Array,
        required: true,
        default:function () {
          return [
            require('../assets/04.png'),
            require('../assets/05.png'),
            require('../assets/06.png'),
            // 添加更多图片路径
          ];
        }
      },
      carouselKey: String // 接收 key 作为 prop
    },
    data() {
      return {
        currentIndex: 0,
        interval: null // 用于存储自动播放的interval
      };
    },
    mounted() {
      this.startAutoPlay();
    },
    beforeUnmount() { // 在 Vue 3 中是 beforeUnmount，Vue 2 中是 beforeDestroy
      this.stopAutoPlay();
    },
    methods: {
      next() {
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      },
      prev() {
        this.currentIndex = (this.currentIndex + this.images.length - 1) % this.images.length;
      },
      startAutoPlay() {
        this.interval = setInterval(this.next, 3000); // 每3秒自动播放到下一张
      },
      stopAutoPlay() {
        clearInterval(this.interval);
      },
      goToDetailPage(key) {
        console.log("点击图片索引", key);

        // 假设您有一个名为 itemMap 的映射对象，其中键是索引，值是对应的项目对象
        const itemMap = {"1":{"path":"printBrandPage","param":"各品牌印刷机库存"},
          "2":{"path":"partBrandPage","param":"各品牌印刷机配件"},
          "3":{"path":"newBrandPage","param":"新产品展示"},
          "4":{"path":"afterBrandPage","param":"印后设备"},
          "5":{"path":"customBrandPage","param":"按需定制"},
          "6":{"path":"activityPage","param":"公司活动"},
        };
        // 使用 key 获取对应的项目对象
        const selectedItem = itemMap[key];

        // 使用 selectedItem 跳转到详情页面
        if (selectedItem) {
          console.log("item:{}", selectedItem)
          this.$router.push({ name: selectedItem.path, params: { menuItem: selectedItem.param } });
        } else {
          console.error(`无法找到键为 ${key} 的项目对象。`);
        }
      }

    }
  }
</script>

<style scoped>
  .carousel {
    overflow: hidden;
    position: relative;
    /* 设置固定高度或者去除以适应内容 */
    height: 300px; /* 举例，根据需要调整 */
  }

  .carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
  }

  .carousel-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .carousel-item img {
    width: 100%;
    display: block;
    height: 300px; /* 指定一个固定高度 */
    object-fit: cover; /* 保持图片比例 */
  }

  .carousel-navigation {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .carousel-button {
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    color: black;
    font-size: 1.5rem;
    padding: 0.5rem;
    cursor: pointer;
  }

  .carousel-button:hover {
    background-color: rgba(255, 255, 255, 0.7);
  }
</style>
